import React, { Component } from 'react';
import '../less/index.less';
import { Button, Drawer, Input, message, Table } from 'antd';
import { inject, observer } from 'mobx-react';
import { CloseOutlined, PlusOutlined } from '@ant-design/icons';

@inject('store')
@observer   // 必须放在@inject标签之后，否则无效
class DictItemDrawer extends Component {

  saveDictItemHandler = () => {
    this.props.store.saveDictItem();
    message.info('保存数据字典项成功');
  };

  render() {
    const { store } = this.props;
    let { dict, visible, loading } = store.dictItemDrawer;
    let key = 0, columns = [{
      title: '数据项值', dataIndex: 'code', key: 'code', width: 200, render: (text, record, index) => {
        return <Input value={text} onChange={e => store.inputDictItem('code', e.target.value, index)}/>;
      },
    }, {
      title: '数据项名称', dataIndex: 'name', key: 'name', width: 350, render: (text, record, index) => {
        return <Input value={text} onChange={e => store.inputDictItem('name', e.target.value, index)}/>;
      },
    }, {
      title: '操作', dataIndex: 'opt', key: 'opt', width: 50, render: (text, record, index) => {
        let disabled = record.isFixed ? 'disabled' : null;
        return (<span>
            <Button title='删除' onClick={e => store.removeDictItem(index)} size={'small'} type="ghost"
                    shape="circle"
                    icon={<CloseOutlined/>} disabled={disabled}/>
            </span>);
      },
    },
    ];
    return (
      <Drawer visible={visible} width={600} closable={false} bodyStyle={{ padding: '5px 15px 60px 15px' }}
              onClose={() => store.closeDictItemDrawer()} destroyOnClose title={dict.name + ' - 数据项'}>
        <Table rowKey={record => key++} size={'small'} columns={columns}
               dataSource={store.dictItemDrawer.dictItemList.slice()}
               pagination={false}/>
        <Button block icon={<PlusOutlined/>} onClick={() => store.insertDictItem()}
                style={{ marginTop: 5, marginLeft: 15, width: 545 }}>添加数据项</Button>
        <div className='footer'>
          <Button onClick={() => store.closeDictItemDrawer()} style={{ marginRight: 8 }}>取消</Button>
          <Button loading={loading} onClick={() => this.saveDictItemHandler()} type="primary">保存</Button>
        </div>

      </Drawer>);
  }
}

export default DictItemDrawer;
